<template>
    <div class="book-step-4">
        <van-checkbox-group v-model="form.adviserList">
            <van-checkbox
                v-for="i in advs"
                :key="i.id"
                :name="i.id"
            >
                <div class="ass">
                    <img :src="i.headimg" alt="">
                    <h4>{{i.name}}</h4>
                    <ul>
                        <li>{{i.desc}}</li>
                    </ul>
                </div>
            </van-checkbox>
        </van-checkbox-group>
    </div>
</template>

<script>
import {orderToAdviser} from '../../api/adviser'
export default {
    props: {
        designerId: String,
    },
    data(){
        return {
            advs: [],
            form: {
                adviserList: [],
            },
        }
    },
    methods: {
        getAdvs(){
            orderToAdviser(this.designerId).then(rsp => {
                if(rsp.code === 200 && rsp.data){
                    this.advs = rsp.data
                }
            })
        }
    },
    created(){
        this.getAdvs()
        // this.advs = JSON.parse(localStorage.bookDesignerAdvs)
    }
}
</script>

<style lang="less">
.book-step-4{
    .van-checkbox-group{
        padding: 10px 30px;
        overflow: hidden;
        .van-checkbox{
            float:left;
            width: 50%;
            margin-bottom: 30px;
            position: relative;
            .van-checkbox__icon{
                position: absolute;
                display: block;
                top: 0;
                left: 50%;
                margin-left: -45px;
                .van-icon{
                    width: 100px;
                    height: 100px;
                    font-size: 30px;
                    line-height: 100px;
                    border: none;
                }
                &.van-checkbox__icon--checked{
                    .van-icon{
                        color: #fff;
                        background-color: rgba(27,60,146, .65);
                    }
                }
            }
            .van-checkbox__label{
                display: block;
                height: auto;
                line-height: initial;
                .ass{
                    text-align: center;
                    &>img{
                        display: block;
                        width: 100px;
                        height: 100px;
                        margin: 0 auto;
                        border-radius: 50%;
                    }
                    &>h4{
                        margin: 10px auto;
                        font-size: 16px;
                    }
                    &>ul{
                        font-size: 13px;
                        color: #707070;
                        li{

                        }
                    }
                }
            }
        }
    }
}
</style>
